<template>
	<div id="bfs-container">

		<div id="bfs-header">
			<h1>广度优先搜索</h1>
		</div>

		<div id="bfs-content">

			<div id="algoControlSection">
				<!-- Table for buttons to control specific animation (insert/find/etc) -->
				<!-- (filled in by javascript code specific to the animtion) -->
				<table id="AlgorithmSpecificControls"> </table>
			</div>

			<!-- Drawing canvas where all animation is done.  Note:  can be resized in code -->

			<canvas id="canvas" width="1000px" height="500px"></canvas>

			<div id="generalAnimationControlSection">
				<!-- Table for buttons to control general animation (play/pause/undo/etc) -->
				<!-- (filled in by javascript code, specifically AnimationMain.js)  -->

				<table id="GeneralAnimationControls"> </table>
			</div>

		</div>
	</div>
</template>

<script>
import { initCanvas } from "@/components/algorithm/AnimationMain";
import { BFS } from "@/components/algorithm/BFS";
export default {
	name: "BFS",
	components: {},
	data() {
		return {
			currentAlg: null,
		}
	},
	computed: {
	},
	methods: {

	},
	created() {

	},
	mounted() {
		const canvas = this.$el.parentElement.querySelector("#canvas");
		let animManag = initCanvas();
		this.currentAlg = new BFS(animManag, canvas.width, canvas.height);
	},
	beforeUnmount() {
	},
}
</script>

<style scoped>
#bfs-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	background-color: rgb(175, 186, 196);
	position: relative;
	justify-content: center;
}

#bfs-header{
	position: absolute;
	height: 100px;
}

#bfs-content{
	position: absolute;
	top: 100px;
}
</style>